*{
	font-family: "幼圆";
}
body{
	overflow:hidden;
	/*position: relative;*/
	height: 100vh;
	width: 100vw;
}
.scoll{
	transition: 1s ease;
}

/*侧边栏*/
.fiexd-right{
	position: fixed;
	width: 20px;
	height: 300px;
	/*background-color: red;*/
	z-index: 99;
	right:30px;
	top:calc( 50vh - 200px );
}
.fiexd-raiud{
	margin-top:30px ;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(0,0,0,0.5);
	border-radius: 20px;
	cursor:	pointer ;
}
.fiexd-raiud-in{
	background-color: rgba(0,0,0,0.8);
}
@media screen and (max-width:500px){
 .fiexd-right{
 	display: none;
 }
}
/*第一页*/
.mod{
	width: 100vw;
	height: 100vh;
	/*background-color: red;*/
	position: relative;
	overflow: hidden;
}
.back-box{
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
}
.back{
	width:120vw;
	height: 120vh;
	position: absolute;
	top: -10vh;
	left: -10vw;
	background-image:url(../img/timg.jpg);
	background-size: 100%;
	background-position: center; 
	-webkit-filter: blur(5px);
   	-moz-filter: blur(5px);
    -ms-filter: blur(5px);    
    filter: blur(5px);
}
.back-mo{
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.3);
}

.mod-center{
	position: absolute;
	width: 50vw;
	height: 50vh;
	/*background-color: red;*/
	margin: 0 auto;
	top:25vh;
	left: 25vw;
	background-image: url(../img/title_kuang.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	color: white;
	line-height: 50vh;
	font-family: "幼圆";
	text-align: center;
	font-size: 7.5vw;
}
@media screen and (max-width:500px){
 .back{
   background-size:cover;
   background-position: center;
  }
}
/*第二页*/
.mod2-center{
	width: 1100px;
	height: 100vh;
	/*background-color: red;*/
	margin: 0 auto;
	padding-top: 15vh;
	position: relative;
}
@media only screen and (min-width: 1600px) {
	.mod2-center{
		width: 1500px;
	}
}
.mod2_float{
	width: 50%;
	height: 100%;
	float: left;
	/*outline: solid;*/
}
.mod2_name{
	width: 80%;
	height: 20vh;
	margin: 0 auto;
	/*background-color: blue;*/
	overflow: hidden;
}
.mod2_log{
	height: 20vh;
	width: 20vh;
	background-image: url(../img/log.jpg);
	background-size: 100%;
	border-radius: 20vh;
	float: left;
}
.mod2_myname{
	float: left;
	width: calc( 100% - 20vh );
	height: 50%;
	/*text-align: center;*/
	line-height: 10vh;
	color: black;
	font-size: 5vh;
	padding-left: 35px;
}
.mod2_zhiye{
	float: left;
	width: calc( 100% - 20vh );
	height: 50%;
}
.mod2_zhiye_box{
	width: 80%;
	height: 9vh;
	background-color: rgb(255,57,0);
	border-radius: 10px;
	color: white;
	font-size: 30px;
	line-height: 9vh;
	text-align: center;
	margin-left: 25px;
}
.mod2-beijing{
	width: 80%;
	margin: 0 auto;
	margin-top: 10vh;
}
.mod2-title{
	height: 12vh;
	width: 100%;
	border-bottom: 2px solid rgb(255,57,0);
	border-left: 20px solid rgb(255,57,0);
	position: relative;
}
.mod2-txt{
	color: rgb(255,57,0);
	font-size: 8vh;
	text-indent: 20px;

}
.mod2-time{
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: rgb(255,57,0);
	font-size: 5vh;
}
.mod2-zhuanye{
	font-size: 10vh;
}
.mod2-xuexiao{
	font-size: 8vh;
	text-align: right;
}
.mod2-lianxi{
	margin-top:30px;
	height: 10vh;
	line-height: 10vh;
	font-size: 5vh;
}
.mod2-lianxi-iso{
	width: 10vh;
	height: 10vh;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	float: left;
	margin-right: 20px;
}
.iso1{
	background-image: url(../img/lianxi1.png);
}
.iso2{
	background-image: url(../img/lianxi2.png);
}
.iso3{
	background-image: url(../img/lianxi3.png);
	
}
/*指尖飞机项目*/
	/*手机*/
.zjfj-iphone{
	position: absolute;
	left: 0px;
	bottom: 20px;
}
.zjfj-show{
	position: absolute;	
	top: 68px;
	left: 18px;
	width:224px;
	height: 399px;
}
.pingmo{
	position: absolute;	
	top: 0px;
	left:0px;
	width:224px;
	height: 399px;
	background-image: url(../img/zjfj/pingmo.png);
	background-size: 100% 100%;
}
.zjfj-sjmx{
	position: absolute;
	height: 259px;
	width: 530px;
	background-image: url(../img/zjfj/sjmx.png);
	background-size: 100% 100%;
	bottom: 0px;
	left: 230px;
	z-index: -1;
}
.zjfj-sjmx-commit{
	position: absolute;
	width: 404px;
	height: 226px;
	top: 17px;
	left: 63px;
	padding:10px;
}
.zjfj-sjmx-js{
	font-size: 30px;
}
.zjfj-ul li{
	display: block;
	list-style: none;
	float: left;
	margin-right: 20px;
	width: 100px;
	font-size: 25px;
	text-align: center;
}
.zjfj-ul{
	padding-left: 20px;
	overflow: hidden;
}

/*标题*/	
.zjfj-github{
	display: block;
	position: absolute;
	top: 15vh;
	right: 0px;
	width: 250px;
	height: 60px;
	border-top: 2px solid rgb(255, 57, 0);
	border-right: 2px solid rgb(255, 57, 0);
	border-left: 1px solid rgb(255, 57, 0);
	border-bottom: 1px solid rgb(255, 57, 0);
	font-size: 25px;
	line-height: 60px;
	text-align: center;
	color: rgb(255, 57, 0);
	border-radius: 10px;
	text-decoration: none;
	transition: 0.5s;
}
.zjfj-github:hover{
	background-color: rgb(255, 57, 0);
	color: white;
	text-decoration: none;
	cursor:pointer;
}
.zjfj-rwm{
	position: absolute;
	right: 0px;
	bottom: 20px;
}
.zjfj-rwm{
	text-align: center;
	font-size: 20px;
}
.zjfj-title{
	position: absolute;
	width: 200px;
	line-height: 50px;
	height: 50px;
	top: 5vh;
	left:calc( 50% - 100px );
	font-size: 50px;
	color: rgb(255, 57, 0);
	background-color: white;
}
.zjfj-title:before{
	content: "";
	position: absolute;
	top: 50%;
	left: -100px;
	width: 400px;
	height: 2px;
	background-color: rgb(255, 57, 0);
	z-index: -1;
}
@media only screen and (min-width: 1600px) {
	.zjfj-iphone {
		transform: scale(1.5) translateY(-100px);
	}
	.zjfj-github {
		transform: scale(1.5);
	}
	.zjfj-rwm {
		transform: scale(1.5) translateY(-100px);
	}
}
/*音乐播放器v1*/
.yyv1-connet{
	position: absolute;
	bottom: 20px;
}
.yyv1-dn{
	/*background-image: url(../img/yybfqv1/diannao.png);
	background-size: 100%;*/
}
.yyv1-dnmx{
	position: absolute;
	z-index: -1;
	bottom: 0px;
	left: 450px;
	background-image: url(../img/yybfqv1/dnmx.png);
	background-size: 100%;
	width: 800px;
	height: 465px;
}
.yyv1-sjmx-commit{
	position: absolute;
	width: 404px;
	height: 226px;
	top: 17px;
	right: 120px;
	padding:10px;
}
.yyv1-ul li{
	display: block;
	list-style: none;
	float: left;
	width: 95px;
	font-size: 25px;
	text-align: center;
}
.yyv1-ul{
	padding-left: 0;
	overflow: hidden;
}
.yyv1-title{
	width: 400px;
	left:calc( 50% - 200px );
}
.yyv1-title:before{
	width: 600px;
}
@media only screen and (min-width: 1600px) {
	.yyv1-connet {
		transform: scale(1.5) translateY(-100px);
	}
}
/*在线音乐播放器v2*/
.yybfqv2-img{
	position: absolute;
	bottom: 20px;
	right: 0px;
}
.yybfqv2-dnmb{
	width: 441px;
	height: 333px;
	position: absolute;
	left: 20px;
	top: calc( 50% - 166px );
	background-image: url(../img/yybfqv2/dnmb.png);
	background-size: 100% 100%;
	padding-left: 25px;
	padding-top: 25px;
}
@media only screen and (min-width: 1600px) {
	.yybfqv2-img {
		transform: scale(1.5) translateY(-100px);
	}
	.yybfqv2-dnmb{
		transform:scale(1.5);
	}
}
/*手机音乐播放器*/
.sjyy-title{
	width: 350px;
	left:calc( 50% - 175px );
}
.sjyy-title:before{
	width: 550px;
}
.sjyy-sj{
	position: absolute;
	bottom: 20px;
	left: calc( 50% - 400px );
}
.sjyy-sj-show{
	position: absolute;
	top: 55px;
	left: 14px;
	width=183px;
	 height=324px;
}
.sjyy-hsj{
	position: absolute;
	z-index: -1;
	top: -20px;
	left: 0px;
}
.sjyy-sjz{
	position: absolute;
	background-image: url(../img/zjfj/iphone.png);
	width: 210px;
	height: 430px;
	background-size: 100% 100%;
	top: 0px;
	left:-200px;
}
.sjyy-sjz-show{
	position: absolute;
	top: 55px;
    left: 14px;
}
.sjyy-mx{
	width: 210px;
	height: 430px;
	background-image:url(../img/sjyy/sjmx.png);
	background-size: 100% 100%;
	position: absolute;
	top: 0px;
	left: 200px;
	padding-top: 45px;
}
.sjyy-sjmx-js{
	font-size: 30px;
	text-align: center;
}
.sjyy-ul li{
	display: block;
	list-style: none;
	float: right;
	width: 95px;
	height: 110px;
	font-size: 25px;
	text-align: center;
}
.sjyy-ul{
	padding-left: 0;
	padding-right: 10px ;
	overflow: hidden;
}
.sjyy-mx h3{
	text-align: right;
	padding-right: 20px;
}
@media only screen and (min-width:1600px ) {
	.sjyy-sj{
		transform: scale(1.5) translateY(-100px);
	}
}
.sjyy-lianjie{
	width:25vw;
	height:100%;
	position: absolute;
	top:0px;
	right: 0px;
}
/*烟台海洋生物导航*/
.hysw-title{
	width: 400px;
	left:calc( 50% - 200px );
}
.hysw-title:before{
	width: 600px;
}
.hysw-img{
	position: absolute;
	bottom: 20px;
	left: 0px;
}
.hysw-dnmb{
	width: 624px;
	height: 500px;
	position: absolute;
	left: 450px;
	bottom: 20px;
	background-image: url(../img/yybfqv2/dnmb.png);
	background-size: 100% 100%;
	padding-right: 25px;
	padding-top: 25px;
	z-index: -1;
}
.hysw-dnmb h3{
	text-align: right;
	padding-right: 10px;
}
.hysw-sjmx-js{
	text-align: center;
}
.hysw-ul li{
	float:right;
}
@media only screen and (min-width:1600px ) {
	.hysw-img {
		transform: scale(1.5) translate(100px,-100px);
	}
	.hysw-dnmb {
		transform: scale(1.5) translate(100px,-100px);
	}
}
/*其他作品*/
.qt-title{
	width: 200px;
	left:calc( 50% - 100px );
}
.qt-title:before{
	width: 400px;
}
.qt-center{
	width: 100%;
	/*background-color: red;*/
	padding-top: 50px;
}
.qt-icon{
	float: left;
	width: 25%;
	height: 500px;
	padding-top: 20px;
	/*background-color: blue;*/
}
.qt-con{
	width: 90%;
	height: 90%;
	margin: 0 auto;
	padding-top: 8px;
	border:1px solid rgba(0,0,0,0.5);
	position: relative;
	top: 0px;
	background-color: white;
	transition: 0.5s;
}

.qt-con:before{
	content: "";
    display: block;
    position: absolute;
    width: 50%;
    left: 8px;
    bottom: 7px;
    height: 50px;
    /* background-color: red; */
    z-index: -1;
    box-shadow: 4px 3px 13px 6px;
    transform: rotate(-4deg);
}
.qt-con:after{
	content: "";
	display: block;
	position: absolute;
    width: 50%;
	right: 8px;
	bottom: 7px;
	height: 50px;
	/*background-color: red;*/
	z-index: -1;
	box-shadow: -4px 3px 13px 6px;
	transform: rotate(4deg);
}
.qt-con:hover{
	top:-10px;
}
.qt-xian{
	width: 95%;
	height: 95%;
	margin: 0 auto;
	background-color: rgba(0,0,0,0.5);
	overflow: hidden;
}
/*我的作品横向幻灯片*/
.production{
	width: 100vw;
	height: 100vh;
	position: relative;
}
.production-last,.production-next{
	z-index: 9999;
	position: absolute;
	height: 30vh;
	width: 5vw;
	margin-top: -15vh;
	top: 50%;
	background-color:rgba(0,0,0,0.5);
	line-height: 30vh;
	color: white;
	font-size: 10vh;
	text-align: center;
	-webkit-user-select: none;
	/* Chrome all / Safari all */
	-moz-user-select: none;
	/* Firefox all */
	-ms-user-select: none;
	/* IE 10+ */
}
.production-last:hover,.production-next:hover{
	background-color: rgba(0,0,0,0.3);
	color: rgba(255,255,255,0.5);
}
.production-last{
	border-radius: 0 1vw 1vw 0;
	left: 0px;
}
.production-next{
	border-radius:1vw 0 0 1vw;
	right: 0px;
}
.mod-box{
	width: 1000vw;
	height: 100vh;
	transition: 1s ease;
	/*overflow: hidden;*/
}
.mod-HF{
	float: left;
}
